<template>
  <dv-full-screen-container class="full-screen-div" style="height: 100vh">
    <div class="my-canvas">
      <my-demo></my-demo>
    </div>
    <div class="page-header">
      <screen-header></screen-header>
      <div class="title-div">页岩气产量检测系统</div>
    </div>
    <div class="expand-div-1">
      <!-- <dv-decoration-1
        :color="['pink', '#136179']"
        style="width: 200px; height: 50px"
      /> -->
      <div class="day-div">{{ timeStr }}</div>
    </div>
    <div class="expand-div-2">
      <dv-decoration3
        :color="['#153e75', '#1f1f1f']"
        style="width: 250px; height: 30px"
      />
      <div class="out-put-div">
        <div>总产量：</div>
        <dv-digital-flop :config="config1" style="width: 200px; height: 45px" />
      </div>
    </div>
    <div class="left-side">
      <div class="chart-1">
        <dv-border-box7> <my-chart1></my-chart1></dv-border-box7>
      </div>
      <div class="chart-2">
        <dv-border-box7> <my-chart2></my-chart2></dv-border-box7>
      </div>
    </div>
    <div class="right-side">
      <div class="chart-3">
        <dv-border-box7> <my-chart3></my-chart3></dv-border-box7>
      </div>
      <div class="chart-4">
        <dv-border-box7> <my-chart4></my-chart4></dv-border-box7>
      </div>
    </div>
    <div class="bottom-side">
      <div style="width: 90px; margin: 0 24px">
        <dv-button
          :bg="false"
          border="Border4"
          color="#096bec"
          fontColor="#ffffff"
          @click="console.log('click')"
        >
          全览
        </dv-button>
      </div>
      <div style="width: 100px; margin: 0 24px">
        <dv-button
          :bg="false"
          border="Border5"
          color="#096bec"
          fontColor="#ffffff"
          @click="console.log('click')"
        >
          产量监测
        </dv-button>
      </div>
      <div style="width: 90px; margin: 0 24px">
        <dv-button
          :bg="false"
          border="Border2"
          color="#096bec"
          fontColor="#ffffff"
          @click="console.log('click')"
        >
          初始
        </dv-button>
      </div>
    </div>

    <!-- <div class="side-part-1">
      <dv-border-box1 ref="borderRef">
        <div h18rem color-white flex justify-center items-center>
          dv-border-box1
        </div>
      </dv-border-box1>
    </div>
    <div class="side-part-2">
      <dv-decoration-1
        :color="['pink', 'yellow']"
        style="width: 200px; height: 50px"
      />
    </div> -->
  </dv-full-screen-container>
</template>

<script setup>
import MyDemo from "@/view/demo/index.vue";
import ScreenHeader from "@/components/screen-header.vue";
import MyChart1 from "@/components/my-chart1.vue";
import MyChart2 from "@/components/my-chart2.vue";
import MyChart3 from "@/components/my-chart3.vue";
import MyChart4 from "@/components/my-chart4.vue";
import { reactive, ref } from "vue";

const config = {
  /* 配置项 */
};

function formatter(number) {
  const numbers = number.toString().split("").reverse();
  const segs = [];

  while (numbers.length) segs.push(numbers.splice(0, 3).join(""));

  return segs.join(",").split("").reverse().join("");
}

const config1 = reactive({
  number: [4857652],
  content: "{nt}m³",
  style: {
    fill: "red",
  },
  formatter,
});

const timeStr = ref("");
const timeNum = ref(0);
const changeConfig = () => {
  if (timeNum.value <= 10000) {
    timeNum.value = timeNum.value + 1;
  } else {
    timeNum.value = 0;
  }
  if (timeNum.value % 3 == 0) {
    config1.number[0] += Math.random() * 100;
  }
  let day = new Date();
  timeStr.value = day.toLocaleDateString() + " " + day.toLocaleTimeString();
  day = null;
};

setInterval(changeConfig, 1000);
</script>

<style scoped>
.full-screen-div {
  position: relative;
}
.my-canvas {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.side-part-1 {
  position: absolute;
  width: 400px;
  height: 300px;
  border: 1px solid blue;
  top: 50px;
  left: 50px;
}
.side-part-2 {
  position: absolute;
  width: 400px;
  height: 300px;
  border: 1px solid blue;
  top: 50px;
  left: 450px;
}

.page-header {
  width: 100%;
  height: 110px;
  /* border: 1px solid red; */
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
}
.left-side {
  width: 20%;
  min-width: 400px;
  height: calc(100% - 260px);
  position: absolute;
  left: 20px;
  top: 130px;
}
.right-side {
  width: 20%;
  min-width: 400px;
  height: calc(100% - 260px);
  position: absolute;
  right: 20px;
  top: 130px;
}
.bottom-side {
  width: 100%;
  height: 110px;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-div {
  position: absolute;
  width: 100%;
  height: 100%;
  /* border: 1px solid red; */
  left: 0;
  top: 0;
  text-align: center;
  line-height: 80px;
  font-size: 24px;
  font-weight: bold;
  user-select: none;
  color: #ffffff;
}
.expand-div-1 {
  /* border: 2px solid red; */
  width: 400px;
  height: 45px;
  padding-left: 80px;
  position: absolute;
  top: 76px;
  left: 20px;
}
.day-div {
  width: 100%;
  height: 100%;
  line-height: 45px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 20px;
  font-weight: bold;
  user-select: none;
  color: #ffffff;
}
.expand-div-2 {
  width: 284px;
  height: 45px;
  position: absolute;
  top: 76px;
  right: 20px;
}
.out-put-div {
  width: 100%;
  height: 100%;
  line-height: 45px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 20px;
  font-weight: bold;
  user-select: none;
  display: flex;
  color: #ffffff;
}
.chart-1 {
  width: 100%;
  height: 49%;
  box-sizing: border-box;
}
.chart-2 {
  width: 100%;
  height: 49%;
  box-sizing: border-box;
  margin-top: 2%;
}
.chart-3 {
  width: 100%;
  height: 49%;
  box-sizing: border-box;
}
.chart-4 {
  width: 100%;
  height: 49%;
  box-sizing: border-box;
  margin-top: 2%;
}
</style>
